<template>
  <Modal
    v-model:active="geometricPruning"
    transfer
    title="几何修剪"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="650"
  >
    <div class="box">
      <Form :model="currentOps" style="width: 100%" :hide-label="true">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">方法</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <RadioGroup v-model:value="currentOps.operation.label">
              <Radio
                class="radioStyle"
                v-for="item in methodItemsList"
                :key="item.value"
                :label="item.label"
                :disabled="item.disabled"
              ></Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">目标</div>
        </div>
        <div class="selectorBox">
          <Grid :gap="8" :columns="24">
            <!-- <Cell :width="6">
                <div class="lineMeshSize">Orientation:</div></Cell
              > -->
            <Cell :width="18">
              <div class="selector-container">
                <div>
                  <Dropdown placement="right">
                    <Button class="selector-button2"
                      ><img
                        src="../../assets/lowerTriangle.svg"
                        alt=""
                        class="icon imgStyle"
                    /></Button>
                    <template #drop>
                      <DropdownList>
                        <DropdownItem
                          v-for="item in orientationList"
                          :label="item.label"
                          :disabled="item.disabled"
                          :key="item.value"
                          @select="orientationBtn(item)"
                        >
                          {{ item.label }}
                        </DropdownItem>
                      </DropdownList>
                    </template>
                  </Dropdown>
                </div>

                <div class="selector-buttons">
                  <button
                    class="selector-button active"
                    @click="selectObject(currentOps.orientation)"
                  >
                    {{ currentOps.orientation.label }}
                  </button>
                  <button class="selector-button icon-button">
                    <img
                      src="../../assets/delete.svg"
                      alt=""
                      class="icon imgStyle"
                    />
                  </button>
                </div>
              </div>
            </Cell>
          </Grid>
        </div>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">Tool Object</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <RadioGroup v-model:value="currentOps.toolObject">
              <Radio
                class="radioStyle"
                v-for="item in toolObjectList"
                :key="item"
                :label="item"
              ></Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <div class="selector-buttons">
              <button
                class="selector-button active"
                @click="selectTool(currentOps.toolObject)"
              >
                修剪工具
              </button>
              <button class="selector-button icon-button">
                <img
                  src="../../assets/delete.svg"
                  alt=""
                  class="icon imgStyle"
                />
              </button>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Grid :gap="8" :columns="24">
              <Cell :width="6"> <div class="lineMeshSize">扫掠方向:</div></Cell>
              <Cell :width="18">
                <div class="selector-container">
                  <div>
                    <Dropdown placement="right">
                      <Button class="selector-button2"
                        ><img
                          src="../../assets/lowerTriangle.svg"
                          alt=""
                          class="icon imgStyle"
                      /></Button>
                      <template #drop>
                        <DropdownList>
                          <DropdownItem
                            v-for="item in sweepingDirectionList"
                            :key="item.key"
                            :label="item.label"
                            @select="sweepingDirectionBtn(item)"
                          >
                            {{ item.label }}
                          </DropdownItem>
                        </DropdownList>
                      </template>
                    </Dropdown>
                  </div>

                  <div class="selector-buttons">
                    <button class="selector-button active">
                      {{ currentOps.sweepingDirection.label }}
                    </button>
                    <button class="selector-button icon-button">
                      <img
                        src="../../assets/delete.svg"
                        alt=""
                        class="icon imgStyle"
                      />
                    </button>
                  </div>
                </div>
              </Cell>
            </Grid>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Grid :gap="8" :columns="24">
              <Cell :width="6">
                <div class="lineMeshSize">Sweep Depth:</div></Cell
              >
              <Cell :width="18">
                <div class="selector-container">
                  <div>
                    <Dropdown placement="right">
                      <Button class="selector-button2"
                        ><img
                          src="../../assets/lowerTriangle.svg"
                          alt=""
                          class="icon imgStyle"
                      /></Button>
                      <template #drop>
                        <DropdownList>
                          <DropdownItem
                            v-for="item in sweepingDepthList"
                            :key="item.key"
                            @select="sweepDepthBtn(item)"
                          >
                            {{ item.label }}
                          </DropdownItem>
                        </DropdownList>
                      </template>
                    </Dropdown>
                  </div>

                  <div class="selector-buttons">
                    <button class="selector-button active">
                      {{ currentOps.sweepDepth.label }}
                    </button>
                  </div>
                </div>
              </Cell>
            </Grid>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Checkbox v-model:checked="currentOps.extendTrimmer">
              Extend Trimmer
            </Checkbox>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Checkbox v-model:checked="currentOps.independentResults">
              独立结果
            </Checkbox>
          </div>
        </FormItem>
      </Form>
      <div class="foot-box">
        <Button @click="confirm">修剪</Button>
        <Button @click="closeBtn">回退</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Form,
  FormItem,
  RadioGroup,
  Radio,
  NumberInput,
  Input,
  Grid,
  Cell,
  Dropdown,
  DropdownList,
  DropdownItem,
  Checkbox,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useCoreStore, _global } from "@/UI/store";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { FaceRollingEyesR } from "@vexip-ui/icons";
const rightMeshEditStore = useRightMeshEditStore();

const coreStore = useCoreStore();
let { geometricPruning } = storeToRefs(coreStore);

const currentOps = ref({
  operation: { label: "线", key: 2, value: "by lines", disabled: false },
  orientation: {
    label: "面",
    value: 2,
    disabled: false,
  },
  toolObject: "扫掠线",
  sweepingDirection: {
    label: "Y轴",
    key: 2,
    value: {
      normalX: 0.0,
      normalY: 1.0,
      normalZ: 0.0,
    },
    disabled: false,
  },
  sweepDepth: {
    label: "扫掠全部",
    key: 1,
    value: "sweep all",
    disabled: false,
  }, // 扫掠全部
  extendTrimmer: false,
  independentResults: false,
});
const methodItemsList = ref([
  { label: "平面/面", value: 1, disabled: false },
  { label: "线", value: 2, disabled: false },
  { label: "点", value: 3, disabled: false },
]);
const toolObjectList = ref(["面", "扫掠线", "顶点"]);
const orientationList = ref([
  {
    label: "壳/实体",
    value: 1,
    disabled: false,
  },
  {
    label: "面",
    value: 2,
    disabled: false,
  },
  {
    label: "曲线",
    value: 3,
    disabled: true,
  },
  {
    label: "边",
    value: 4,
    disabled: false,
  },
]);
const sweepingDirectionList = ref([
  {
    label: "X轴",
    key: 1,
    value: {
      normalX: 1.0,
      normalY: 0.0,
      normalZ: 0.0,
    },
    disabled: false,
  },
  {
    label: "Y轴",
    key: 2,
    value: {
      normalX: 0.0,
      normalY: 1.0,
      normalZ: 0.0,
    },
    disabled: false,
  },
  {
    label: "Z轴",
    key: 3,
    value: {
      normalX: 0.0,
      normalY: 0.0,
      normalZ: 1.0,
    },
    disabled: false,
  },
  {
    label: "过三点N1,N2,N3的平面",
    key: 4,
    value: "4",
    disabled: true,
  },
  {
    label: "边切向",
    key: 5,
    value: "5",
    disabled: true,
  },
  {
    label: "面的法向",
    key: 6,
    value: "6",
    disabled: true,
  },
  {
    label: "In Basic",
    key: 7,
    value: "7",
    disabled: true,
  },
  {
    label: "In Displacement",
    key: 8,
    value: "8",
    disabled: true,
  },
  {
    label: "Direction Node",
    key: 9,
    value: "9",
    disabled: true,
  },
]);
const sweepingDepthList = ref([
  {
    label: "扫掠全部",
    key: 1,
    value: "sweep all",
    disabled: false,
  },
  {
    label: "其他",
    key: 2,
    value: "more",
    disabled: true,
  },
]);
function orientationBtn(item: any) {
  currentOps.value.orientation = item;
}
function sweepingDirectionBtn(item: any) {
  currentOps.value.sweepingDirection = item;
}
function sweepDepthBtn(item: any) {
  currentOps.value.sweepDepth = item;
}
function confirm() {
  rightMeshEditStore.setSeamModelValue(currentOps.value);

  const {
    toolObject,
    orientation,
    sweepingDirection,
    sweepDepth,
    extendTrimmer,
    independentResults,
  } = currentOps.value;
  const { normalX, normalY, normalZ } = sweepingDirection.value;

  const commonParams = {
    orientation: orientation.value,
    toolObject,
    normalX,
    normalY,
    normalZ,
    sweepDepth: sweepDepth.value,
    extendTrimmer,
    independentResults,
  };

  if (toolObject === "扫掠线" && orientation.value === 2) {
    _global.Engine.trim.trimFaceByLine({
      operation: "by lines",
      ...commonParams,
    });
  } else if (toolObject === "面" && orientation.value === 1) {
    _global.Engine.trim.trimBodyByFace({
      operation: "by face",
      ...commonParams,
    });
  } else if (toolObject === "面" && orientation.value === 2) {
    _global.Engine.trim.trimFaceByFace({
      operation: "by face",
      ...commonParams,
    });
  } else if (toolObject === "顶点" && orientation.value === 4) {
    _global.Engine.trim.trimLineByNode({
      operation: "by nodes",
      ...commonParams,
    });
    // clear point actor created in measure component
    _global.Engine.measureComp.clearMeasureActors();
  }

  geometricPruning.value = false;
  coreStore.setEngineState(0);
}
function closeBtn() {
  geometricPruning.value = false;
  coreStore.setEngineState(0);
}
function selectTool(elem: any) {
  // 选择单元
  switch (elem) {
    case "扫掠线":
      coreStore.setEngineState(3); // 选扫掠线
      break;
    case "面":
      coreStore.setEngineState(0); // 选面
      break;
    case "顶点":
      coreStore.setEngineState(1); // 选顶点
      break;
    default:
      break;
  }
}
function selectObject(object: any) {
  switch (object.value) {
    case 1:
      coreStore.setEngineState(2); // 选实体
      break;
    case 2:
      coreStore.setEngineState(0); // 选面
      break;
    case 3:
      coreStore.setEngineState(3); // 选曲线
      break;
    case 4:
      coreStore.setEngineState(3); // 选edge
      break;
    default:
      break;
  }
}
</script>

<style scoped>
.box {
  padding: 15px;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.imgStyle {
  width: 20px;
  height: 20px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-form__item) {
  margin-bottom: 0px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.radioStyle {
  margin-right: 100px;
}
.lineMeshSize {
  height: 30px;
  line-height: 30px;
}
.selector-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.selector-button2 {
  height: 32px;
  width: 42px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
:deep(.vxp-button-vars) {
  --vxp-button-min-width: none;
}
</style>
